---
title: <ActionBar.Label>
---

import { PuckPreview } from "@/docs/components/Preview";
import { ActionBar } from "@/puck";

# \<ActionBar.Label\>

Render a label in the [`<ActionBar>`](action-bar) or an [`<ActionBar.Group>`](action-bar-group).

```tsx showLineNumbers {2,4} copy
<ActionBar>
  <ActionBar.Label label="Label 1" />
  <ActionBar.Group>
    <ActionBar.Label label="Label 2" />
    <ActionBar.Action>★</ActionBar.Action>
  </ActionBar.Group>
</ActionBar>
```

<PuckPreview>
  <div style={{ display: "flex" }}>
    <ActionBar>
      <ActionBar.Label label="Label 1" />
      <ActionBar.Group>
        <ActionBar.Label label="Label 2" />
        <ActionBar.Action>★</ActionBar.Action>
      </ActionBar.Group>
    </ActionBar>
  </div>
</PuckPreview>

## Props

| Prop              | Example   | Type   | Status   |
| ----------------- | --------- | ------ | -------- |
| [`label`](#label) | `"Label"` | String | Required |

## Required Props

### `label`

The label text.
